<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script src="./js/jquery.js"></script>
</head>
<body>
    <div class="box">
        <input type="button" value="获取数据" id="j_btnGetData" />
        <table>
            <thead>
                <tr>
                    <th>标题</th>
                    <th>地址</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody id="j_tbData">
            </tbody>
        </table>
    </div>
    <script>
    var data = [{
        name: "千锋教育",
        url: "http://www.1000phone.cn",
        type: "IT最强培训机构"
    }, {
        name: "千锋教育",
        url: "http://www.1000phone.com",
        type: "大学生IT培训机构"
    }, {
        name: "千锋教育",
        url: "http://web.1000phone.cn",
        type: "前端的黄埔军校"
    }];

        $.fn.extend({
            create(){
                this.find("#j_btnGetData").on("click",function(){
                    var str=""
                    for(var i=0;i<data.length;i++){
                        str+=`
                            <tr>
                                <td>${data[i].name}</td>    
                                <td>${data[i].url}</td>    
                                <td>${data[i].type}</td>    
                            </tr>
                        `
                    }
                    $("tbody").html(str)
                })
            }
        })

        $(function(){
            $(".box").create()
        })
    </script>
</body>
</html>